<template>
	<div class="orders">
		<div class="div1">
			<aside>
				<i class="el-icon-s-data"><span>后台订单管理</span></i>
				<button><router-link to="/admin/orders"><i class="el-icon-refresh-right"></i></router-link></button>
			</aside>
			<hr/>
		</div>
		<div class="div2">
			<aside>
				<el-select v-model="payment" placeholder="付款">
					<el-option value="--请选择--">--请选择--</el-option>
					<el-option value="未付款">未付款</el-option>
					<el-option value="已付款">已付款</el-option>
				</el-select>
				<el-select v-model="shipments" placeholder="发货">
					<el-option value="--请选择--">--请选择--</el-option>
					<el-option value="未发货">未发货</el-option>
					<el-option value="已发货">已发货</el-option>
					<el-option value="已签收">已签收</el-option>
				</el-select>
				<el-select v-model="date">
					<el-option value="--请选择--">--请选择--</el-option>
					<el-option value="7天内">7天内</el-option>
					<el-option value="15天内">15天内</el-option>
					<el-option value="30天内">30天内</el-option>
					<el-option value="60天内">60天内</el-option>
					<el-option value="120天内">120天内</el-option>
				</el-select>
			</aside>
			<aside>
				<el-input v-model="user.username" placeholder="下单人-账号" style="width: 220px;"></el-input>
				<el-input v-model="user.ship2phone" placeholder="下单人-手机号" style="width: 220px;"></el-input>
				<el-input v-model="user.ship2name" placeholder="下单人-姓名" style="width: 220px;"></el-input>
			</aside>
			<aside>
				<el-button @click="find()" type="primary">查询</el-button>
			</aside>
		</div>
		<div class="div3">
			<el-table :data="time" size="medium" border style="width: 100%;" :expand-row-keys="expand" row-key="ordid">
				<el-table-column type="expand">
					<template slot-scope="props">
					<div class="ord">
						<div class="us">
							<div class="ord-account"><strong>账号:{{props.row.user.account}}</strong></div>
							<div class="ord-phone"><strong>电话:{{props.row.user.phone}}</strong></div>
							<div class="ord-nickname"><strong>下单:{{props.row.user.nickname}}</strong></div>
						</div>
						<br>
						<div v-for="item in props.row.items">
							<div class="ku">
								<img :src="`${$ip}/api/public/showimg/${item.book.pic}`">
								<div class="book-name" style="width: 280px;margin-left: 20px;overflow: hidden;"><strong>名称:</strong>{{item.book.name}}</div>
								<div class="book-num" style="width: 80px;"><strong>数量:</strong>{{item.num}}</div>
								<div class="book-price" style="width: 120px;"><strong>单价:</strong>{{item.price}}</div>
								<div class="book-stock" style="width: 80px;"><strong>库存:</strong>{{item.book.stock}}</div>
							</div>
						</div>
					</div>
					<div class="btn">
						<el-button v-show="props.row.payStatus==1 && props.row.shipStatus==0" @click="go2add()" type="warning">发货</el-button>
						<el-dialog :visible.sync="dialogFormVisible">
						  <h3 style="text-align: center;">请输入发货信息</h3>
						  <br>
						  <el-form ref="ship" :model="ship" label-width="150px">
						  	<el-form-item label="发货单号">
						  		<el-input v-model="shiptime"></el-input>
						  	</el-form-item>
						  	<el-form-item label="快递公司或快递员">
						  		<el-input v-model="ship.shipper"></el-input>
						  	</el-form-item>
						  	<el-form-item>
						  		<el-button type="primary" @click="add(props.row)">确认发货</el-button>
						  	</el-form-item>
						  </el-form>
						</el-dialog>
					</div>
					</template>
				</el-table-column>
				<el-table-column prop="ordid" label="订单号"></el-table-column>
			    <el-table-column prop="ship2name" label="收货人"></el-table-column>
			    <el-table-column prop="ship2addr" label="收货地址"></el-table-column>
				<el-table-column prop="ship2phone" label="电话"></el-table-column>
				<el-table-column prop="shipno" label="发货单号"></el-table-column>
				<el-table-column prop="tcreate" label="下单时间"></el-table-column>
				<el-table-column prop="amount" label="总价"></el-table-column>
				<el-table-column label="付款">
					<template slot-scope="scope">
						<span v-show="scope.row.payStatus==0"><strong>未付</strong></span>
						<span v-show="scope.row.payStatus==1" style="color: green;"><strong>已付</strong></span>
					</template>
				</el-table-column>
				<el-table-column label="收货">
					<template slot-scope="scope">
						<a v-show="scope.row.payStatus == 1 && scope.row.shipStatus == 0" style="color: red;" @click="expandOne(scope.row)">
							<strong>可发</strong>
						</a>
						<span v-show="scope.row.payStatus==0 && scope.row.shipStatus==0"><strong>待发</strong></span>
						<span v-show="scope.row.shipStatus==1"><strong>已发</strong></span>
						<span v-show="scope.row.shipStatus==2" style="color: green;"><strong>已签收</strong></span>
					</template>
				</el-table-column>
			</el-table>
		</div>
	</div>
</template>

<script>
export default {
	name:'Orders',
	data(){
		return{
			payment:[],
			shipments:[],
			date:[],
			user:{},
			orders:[],
			items:[],
			page:{
				num: 1,
				lines: 5,
				total: 0
			},
			expand:[],
			dialogFormVisible: false,
			ship:{}
		}
	},
	computed:{
		time(){
			this.orders.forEach((item)=>{
			let t =new Date();
			let year =t.getFullYear();
			let month =t.getMonth()+1;
			let date =t.getDate();
			let k =`${year}-${month}-${date}`;
			item.tcreate = k;
			console.log(k);
			})
			return this.orders;
		},
		payStaus(){
			return(type)=>{
				switch(type){
				case '未付款':
				 return 0;
				break;
				case '已付款':
				 return 1;
				break;
				}
			}
		},
		shipStatus(){
			return(type)=>{
				switch(type){
				case '未发货':
				 return 0;
				break;
				case '已发货':
				 return 1;
				break;
				case '已签收':
				 return 2;
				break;
				}
			}
		},
		days(){
			return(type)=>{
				switch(type){
				case '7天内':
				 return 7;
				break;
				case '15天内':
				 return 15;
				break;
				case '30天内':
				 return 30;
				break;
				case '60天内':
				 return 60;
				break;
				case '120天内':
				 return 120;
				break;
				}
			}
		},
		shiptime(){
			let s =new Date();
			let year =s.getFullYear();
			let month =s.getMonth()+1;
			let date =s.getDate();
			let num =Math.floor(Math.random()*(100000-1000)+10000);
			this.ship.shipno =`${year}${month}${date}${num}`;
			return this.ship.shipno;
		}
	},
	methods:{
		find(){
			let k ={
				payStaus:this.payStaus(this.payment),
				shipStatus:this.shipStatus(this.shipments),
				days:this.days(this.date),
				account:this.user.username,
				nickname:this.user.ship2name,
				phone:this.user.ship2phone
			}
			this.$postkv("/api/adm/ord/findPageOrders2u/" + this.page.num + "/" + this.page.lines,k).then((resp)=>{
				this.orders =resp.data.data.orders;
				console.log(this.orders);
				
			})
		},
		go2add(){
			this.dialogFormVisible=true;
		},
		add(row){
			this.$postkv("/api/adm/ord/updateShip/"+row.ordid,this.ship).then((resp)=>{
				this.orders =resp.data.data;
				console.log(this.orders);
				
				this.$message({
					message:resp.data.msg,
					type:'success'
				})
			})
		},
		expandOne(row){
			this.expand=[];
			this.expand.push(row.ordid);
		}
	},
	mounted(){
		this.find();
	}
}
</script>

<style scoped>
a{
	color: white;
}
.orders{
	width: 78%;
	margin: 0 auto;
}
.orders .div1{
	margin-top: 15px;
}
.orders .div1 aside{
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.orders .div1 aside span{
	margin-left: 8px;
}
.orders .div1 aside button{
	width: 80px;
	line-height: 40px;
	border: none;
	color: white;
	background-color: #009688;
	margin-right: 2vw;
	font-size: 18px;
}
.orders .div2 aside{
	width: 80%;
	display: flex;
	align-items: center;
	justify-content: space-around;
}
.orders .div2 aside .el-button{
	width: 100px;
	line-height: 20px;
	font-size: 16px;
	position: relative;
	bottom: 7vh;
	left: 35vw;
}
.orders .div3 .ord{
	width: 70%;
	margin: 0 auto;
}
.orders .div3 img{
	width: 60px;
	height: 60px;
	border-radius: 8px;
}
.orders .div3 .us .ord-account{
	width: 120px;
	margin-left: 80px;
}
.orders .div3 .us .ord-phone{
	width: 200px;
}
.orders .div3 .us .ord-nickname{
	width: 120px;
}
.orders .div3 .us{
	width: 100%;
	display: flex;
	margin-top: 20px;
}
.orders .div3 .ku{
	width: 100%;
	display: flex;
	align-items: center;
}
.div3 .btn .el-button{
	position: absolute;
	bottom: 35px;
	left: 10px;
}
</style>
